<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好友留言板</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：深紫色
                        secondary: '#EC4899', // 辅助色：粉色
                        neutral: '#F3F4F6', // 中性色：浅灰
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .message-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 页面标题 -->
        <header class="text-center mb-10">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 mb-2">
                <i class="fa fa-comments text-primary mr-3"></i>好友留言板
            </h1>
            <p class="text-gray-600 text-lg">留下你的祝福与思念，分享生活的点滴</p>
        </header>
        
        <!-- 留言表单 -->
        <section class="bg-white rounded-xl p-6 mb-10 shadow-md">
            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-pencil-square-o text-primary mr-2"></i>写下你的留言
            </h2>
            <form id="messageForm" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">你的名字</label>
                        <input 
                            type="text" 
                            id="name" 
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                            placeholder="请输入你的名字"
                        >
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱（选填）</label>
                        <input 
                            type="email" 
                            id="email" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                            placeholder="请输入你的邮箱"
                        >
                    </div>
                </div>
                <div>
                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                    <textarea 
                        id="message" 
                        rows="4" 
                        required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all resize-none"
                        placeholder="分享你的想法..."
                    ></textarea>
                </div>
                <button 
                    type="submit" 
                    class="bg-primary text-white px-6 py-2.5 rounded-lg font-medium btn-hover flex items-center"
                >
                    <i class="fa fa-paper-plane mr-2"></i>发布留言
                </button>
            </form>
        </section>
        
        <!-- 留言列表 -->
        <section>
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <i class="fa fa-list-alt text-primary mr-2"></i>最新留言
                </h2>
                <span id="messageCount" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
                    0 条留言
                </span>
            </div>
            
            <!-- 留言列表容器 -->
            <div id="messagesContainer" class="space-y-6">
                <!-- 初始留言示例 -->
                <div class="bg-white rounded-xl p-6 message-shadow transform transition-all duration-300 hover:shadow-lg">
                    <div class="flex justify-between items-start mb-3">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold mr-3">
                                小
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800">小明</h3>
                                <p class="text-gray-500 text-sm">今天 14:30</p>
                            </div>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                    <p class="text-gray-700 leading-relaxed">
                        好久不见，最近过得怎么样？上次一起去的那家咖啡店推出了新品，有空一起去尝尝呀！
                    </p>
                </div>
                
                <div class="bg-white rounded-xl p-6 message-shadow transform transition-all duration-300 hover:shadow-lg">
                    <div class="flex justify-between items-start mb-3">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary font-bold mr-3">
                                李
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800">李华</h3>
                                <p class="text-gray-500 text-sm">昨天 09:15</p>
                            </div>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                    <p class="text-gray-700 leading-relaxed">
                        祝你生日快乐！虽然不能当面庆祝，但心意已经送到啦，希望你每天都开开心心的！
                    </p>
                </div>
            </div>
            
            <!-- 空状态提示 -->
            <div id="emptyState" class="hidden text-center py-16">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                    <i class="fa fa-envelope-o text-2xl text-gray-400"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">还没有留言</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                    快来发布第一条留言吧，让朋友们知道你的近况
                </p>
            </div>
        </section>
        
        <!-- 页脚 -->
        <footer class="mt-16 text-center text-gray-500 text-sm">
            <p>© 2023 好友留言板 - 分享生活，连接你我</p>
        </footer>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            const messageForm = document.getElementById('messageForm');
            const messagesContainer = document.getElementById('messagesContainer');
            const messageCount = document.getElementById('messageCount');
            const emptyState = document.getElementById('emptyState');
            
            // 初始化留言计数
            updateMessageCount();
            
            // 检查是否有留言，控制空状态显示
            checkEmptyState();
            
            // 表单提交事件
            messageForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                const name = document.getElementById('name').value.trim();
                const email = document.getElementById('email').value.trim();
                const message = document.getElementById('message').value.trim();
                
                // 创建新留言元素
                const newMessage = createMessageElement(name, message);
                
                // 添加到留言列表顶部
                messagesContainer.insertBefore(newMessage, messagesContainer.firstChild);
                
                // 添加动画效果
                newMessage.classList.add('opacity-0', 'translate-y-4');
                setTimeout(() => {
                    newMessage.classList.remove('opacity-0', 'translate-y-4');
                }, 10);
                
                // 重置表单
                messageForm.reset();
                
                // 更新留言计数
                updateMessageCount();
                
                // 检查空状态
                checkEmptyState();
                
                // 滚动到新留言
                newMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            });
            
            // 为删除按钮添加事件委托
            messagesContainer.addEventListener('click', function(e) {
                if (e.target.closest('.fa-trash-o')) {
                    const messageElement = e.target.closest('.bg-white');
                    
                    // 添加删除动画
                    messageElement.classList.add('opacity-0', 'translate-y-4');
                    
                    // 动画结束后移除元素
                    setTimeout(() => {
                        messageElement.remove();
                        updateMessageCount();
                        checkEmptyState();
                    }, 300);
                }
            });
            
            // 创建留言元素函数
            function createMessageElement(name, message) {
                const div = document.createElement('div');
                div.className = 'bg-white rounded-xl p-6 message-shadow transform transition-all duration-300 hover:shadow-lg';
                
                // 获取当前时间
                const now = new Date();
                const timeString = `${now.getMonth() + 1}月${now.getDate()}日 ${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
                
                // 取名字的第一个字作为头像
                const firstChar = name.charAt(0);
                
                // 随机选择头像背景色
                const bgColors = ['bg-primary/10 text-primary', 'bg-secondary/10 text-secondary', 'bg-green-100 text-green-600', 'bg-blue-100 text-blue-600', 'bg-yellow-100 text-yellow-600'];
                const randomColor = bgColors[Math.floor(Math.random() * bgColors.length)];
                
                div.innerHTML = `
                    <div class="flex justify-between items-start mb-3">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full ${randomColor} flex items-center justify-center font-bold mr-3">
                                ${firstChar}
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800">${name}</h3>
                                <p class="text-gray-500 text-sm">${timeString}</p>
                            </div>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                    <p class="text-gray-700 leading-relaxed">
                        ${message}
                    </p>
                `;
                
                return div;
            }
            
            // 更新留言计数
            function updateMessageCount() {
                const count = messagesContainer.children.length;
                messageCount.textContent = `${count} 条留言`;
            }
            
            // 检查空状态
            function checkEmptyState() {
                if (messagesContainer.children.length === 0) {
                    emptyState.classList.remove('hidden');
                } else {
                    emptyState.classList.add('hidden');
                }
            }
        });
    </script>
</body>
</html>
